<template>
	
	<div class="recommend">
		<div class="recommend_title">
			<van-icon name="arrow-left" size="22px" style="position: absolute;left: 5px;" @click="back" />
			<p>{{data.title}}</p>
		</div>
		<div class="recommend_img">
			<img :src="data.bannerPicture" alt="" />
		</div>
		<div class="recommend_classification">
			
			<van-tabs v-model="active" color="#7CA899" >
			  <van-tab :title="subtype.title" v-for="subtype in subtypes" >
				  <div class="recommend_goods">
				  	<div class="guess">
				  		
				  		<div class="guess_box">
				  			
				  			<div class="guess_item" v-for="item in subtype.goodsItems.items" :key="item.id" @click="gotoDetail(item.id)">
				  				<div class="guess_item_img">
				  					<img :src="item.picture" alt="" />
				  				</div>
				  				
				  				<div class="guess_item_text">
				  					<span class="guess_item_text_title">{{item.name}}</span>
				  					<span class="guess_item_text_price">￥{{item.price}}</span>
				  				</div>
				  			</div>
				  		</div>
				  	</div>
				  </div>
			  </van-tab>
			 
	
			</van-tabs>
		</div>
		
	</div>
</template>

<script>
	import request from '../../api/request.js'
	export default{
		name:'recommend',
		data() {
			return{
				data:{},
				 active: 0,
				 keys:{
				 	1:'preference',
				 	2:'inVogue',
				 	3:'oneStop',
				 	4:'new'
				 },
				 page:1,
				 subtypes:[]
			}
		},
		mounted() {
			this.getData()
			
			window.addEventListener("scroll", this.handleScroll, true);
		},
		methods:{
			async getData() {
				
				let res = await request({
					url: `/hot/${this.keys[this.$route.query.key]}`,
					method: 'get',
			
				})
				this.data=res.result
				this.subtypes=this.data.subTypes
				
			},
			// 跳转商品详细页面
			gotoDetail(id){
				this.$router.push({
					name:'detail',
					query:{
						id
					}
				})
			},
			back(){
				this.$router.back()
			},
			async update_goods(){
				let res = await request({
					url: `/hot/${this.keys[this.$route.query.key]}?page=${++this.page}`,
					method: 'get',
							
				})
				console.log(this.subtypes[this.active].goodsItems.items)
				this.subtypes[this.active].goodsItems.items.push(...res.result.subTypes[this.active].goodsItems.items)
				console.log(this.subtypes[this.active].goodsItems.items)
				
			},
			 handleScroll(){
			            let scrollTop = document.documentElement.scrollTop;//滚动高度
			            let clientHeight = document.documentElement.clientHeight;//可视高度
			            let scrollHeight = document.documentElement.scrollHeight;//内容高度
			            // console.log("滚动高度",scrollTop);
			            // console.log("可视高度",clientHeight);
			            // console.log("内容高度",scrollHeight);
						if(scrollTop+clientHeight===scrollHeight){
							this.update_goods()
							
						}
			        }
			
			
		}
	}
</script>

<style lang="scss">
	.recommend{
		width: 100%;
		height: 100%;
		.recommend_title {
			width: 100%;
			height: 6%;
			background-color: #F8F8F8;
			display: flex;
			justify-content: center;
			align-items: center;
			
			p {
				font-size: 30px;
			
			}
		}
		.recommend_img{
			width: 100%;
			height: 14%;
			
			img{
				width: 100%;
				height: 100%;
				border-bottom-left-radius: 50px;
				border-bottom-right-radius: 50px;
			}
		}
		.recommend_classification{
			width: 95%;
			height: 6%;
			
			margin: 0 auto;
			box-sizing: border-box;
			.recommend_goods{
				width: 100%;
				height:auto;
				
				.guess{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					box-sizing: border-box;
					.guess_box{
						width: 100%;
						height: 100%;
						background-color:#F7F7F7;
						margin-bottom: 100px;
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						box-sizing: border-box;
						.guess_item{
							background-color: white;
							width: 46%;
							height: 500px;
							border-radius: 10px;
							margin-bottom: 10px;
							margin-left: 20px;
							box-sizing: border-box;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							align-items: flex-start;
							.guess_item_img{
								
								width: 100%;
								height: 70%;
								
								display: flex;
								justify-content:center;
								align-items: center;
								img{
									width: 80%;
									height: 80%;
								}
								
							}
							.guess_item_text{
								width: 100%;
								height: 20%;
								display: flex;
								flex-wrap: wrap;
								justify-content: center;
								
								.guess_item_text_title{
									width: 100%;
									height: 70%;
									font-size: 26px;
									padding: 0px 20px;
									overflow: hidden;
								}
								.guess_item_text_price{
									
									width: 100%;
									height: 30%;
									font-size: 25px;
									
									padding-left: 25px;
									color: #985451;
									padding-top: 15px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>